import { StyleSheet, Image, Platform } from "react-native";
import { View, TextInput, Button, Text,TouchableOpacity } from "react-native";
import { useState } from "react";
import { router } from "expo-router";
import axios from "axios";
import axiosApi from "../Api/axios";
import { MMKV } from "react-native-mmkv";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { lightColors } from "@rneui/themed";
import { useRouter } from "expo-router";
export default function TabTwoScreen() {
  const router = useRouter();
  const [user, setUser] = useState("");
  const [password, setPassword] = useState("");
  const login = () => {
    axiosApi
      .post("/llp/loginq", {
        users: user,
        password: password,
      })
      .then((res) => {
        console.log(res.data);
        if (res.data.code === 200) {
          // storage.set("login", JSON.stringify(res.data.data));
          AsyncStorage.setItem("login", JSON.stringify(res.data.data));
          router.push("/");
        }
      });
  };
  return (
    <View>
      <View style={styles.loginImages}>
        <Image
          source={{
            uri: "https://www.axured.cn/assets/axurefiles/39ba1792dbc57ee8063b17cf7a5c9fcc_478/images/%E6%B3%A8%E5%86%8C/u2342.png",
          }}
          style={{ width: 100, height: 100 }}
        />
      </View>
      <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="手机号码"
        keyboardType="phone-pad"
        onChange={(e) => setUser(e.target.value)}
      />
      <TextInput
        style={styles.input}
        placeholder="登录密码"
        secureTextEntry
        onChange={(e) => setPassword(e.target.value)}
      />
    </View>
      <View>
        {/* 点击登录 */}
        <View style={styles.loginbutton} onPress={login}>
          <Button
            title="登录"
            color={"#0079fe"}
            onPress={() => {
              login();
            }}
          />
        </View>
      </View>
      <View style={styles.geng}>
        
        <TouchableOpacity onPress={() => {
          router.push('/lllpLogin/Ress')
        }}>
          <Text>注册新用户</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {
          router.push('/lllpLogin/register')
        }}>
          <Text>找回密码</Text>
        </TouchableOpacity>
        
      </View>
      {/* <button
        onClick={async () => {
          // let a = JSON.parse(storage.getString("login"));
          let a = await AsyncStorage.getItem("login");
          console.log(JSON.parse(a));

          // console.log(a.names);
        }}
      >
        你好
      </button> */}
    </View>
  );
}

const styles = StyleSheet.create({
  login: {
    width: "100%",
    height: 50,
    textAlign: "center",
    marginTop: 30,
  },
  loginImages: {
    width: "100%",
    height: 200,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  loginInput: {
    width: "100%",
    height: 60,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  loginbutton: {
    backgroundColor: "#0079fe",
    width: "90%",
    height: 40,
    borderRadius: 5,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    color: "#fff",
    marginLeft: "5%",
    marginTop: 20,
  },
  geng: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    marginTop: 40,
    width: "90%",
    marginLeft: "5%",
    color: "#107efd",
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  input: {
    width: '100%',
    height: 50,
    paddingLeft: 16,
    paddingRight: 16,
    marginBottom: 16,
    borderRadius: 8,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#ddd',
    fontSize: 16,
    color: '#333',
  },
});
